<script setup>
import { ref } from 'vue'
import { planSaveTreatmentPlanService } from '@/api/treatmentPlan.js'

const ishow = ref(false)

const props = defineProps({
  patientId: {
    type: String
  },
  recordId: {
    type: String
  }
})

// 表单类型
const dialogType = ref(1)

// 表单数据
const planForm = ref({
  mainDoctor: '',
  planType: '',
  planDec: ''
})

/**
 * 提交表单
 */
const submitForm = async () => {
  // 添加计划
  await planSaveTreatmentPlanService(
    props.patientId,
    props.recordId,
    planForm.value
  )
  ishow.value = false
  if (dialogType.value === 1) {
    // 提示成功
    ElMessage.success('添加治疗计划成功')
  } else {
    // 提示成功
    ElMessage.success('编辑治疗计划成功')
  }
}

/**
 * 对外提供方法
 */
defineExpose({
  open(data) {
    // 添加计划
    if (data === 1) {
      // 清空表单
      planForm.value = {
        mainDoctor: '',
        planType: '',
        planDec: ''
      }
      dialogType.value = 1
    } else {
      // 编辑计划
      // 将数据填充到表单
      planForm.value = data
      dialogType.value = 2
    }
    ishow.value = true
  }
})
</script>

<template>
  <el-dialog
    v-model="ishow"
    :title="
      dialogType === 1 ? '添加治疗计划' : '编辑治疗计划'
    "
    width="700"
  >
    <div class="add-plan-form">
      <el-form
        :model="planForm"
        label-width="auto"
        style="max-width: 500px"
      >
        <el-form-item label="计划类型">
          <el-select
            v-model="planForm.planType"
            placeholder="请选择计划类型"
            size="large"
            style="width: 240px"
          >
            <el-option :key="0" label="拔牙" :value="0" />
            <el-option :key="1" label="补牙" :value="1" />
            <el-option
              :key="2"
              label="牙龈出血"
              :value="2"
            />
            <el-option
              :key="3"
              label="短期牙周病"
              :value="3"
            />
            <el-option
              :key="4"
              label="长期牙周病"
              :value="4"
            />
            <el-option
              :key="5"
              label="牙周病康复"
              :value="5"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="主治医生">
          <el-input
            placeholder="请输入主治医生"
            v-model="planForm.mainDoctor"
          />
        </el-form-item>
        <el-form-item label="治疗计划">
          <el-input
            v-model="planForm.planDec"
            :rows="2"
            type="textarea"
            placeholder="请输入治疗计划"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="ishow = false">取消</el-button>
        <el-button type="primary" @click="submitForm">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
